<template>
    <van-pull-refresh v-model="isLoading" :disabled="loadStatus" :head-height="80" success-text="刷新成功" @refresh="reload">

    <div class="content" >
        <div v-if="car_show==0">
            <Header></Header>
            <van-dropdown-menu class="buy-search-box">
                <van-dropdown-item class="item" v-model="order" :options="orderOption" @change="orderChange"/>
                <van-dropdown-item class="item" title="类型" ref="itemType">
                    <div class="search-car-box">
                        <div class="box-item" v-for="(item,index) in typeArr" :class="{'active':typeVal==item.name}" @click="chooseType(item.name)">
                            <img class="img" :src="item.img"/>
                            <div class="tit">{{item.name}}</div>
                        </div>
                    </div>
                </van-dropdown-item>

                <van-dropdown-item class="item" title="品牌" @opened="car_show=1"/>

                <van-dropdown-item class="item" title="价格" ref="itemPrice">
                    <div class="search-car-box no-just">
                        <div class="item-money" @click="chooseMoney(0,0)" :class="{'active':maxMoney==0}">不限</div>
                        <div class="item-money" @click="chooseMoney(0,3)" :class="{'active':maxMoney==3}">3万以下</div>
                        <div class="item-money" @click="chooseMoney(3,5)" :class="{'active':maxMoney==5}">3-5万</div>
                        <div class="item-money" @click="chooseMoney(5,7)" :class="{'active':maxMoney==7}">5-7万</div>
                        <div class="item-money" @click="chooseMoney(7,12)" :class="{'active':maxMoney==7}">7-12万</div>
                        <div class="item-money" @click="chooseMoney(12,20)" :class="{'active':maxMoney==7}">12-20万</div>
                        <div class="item-money" @click="chooseMoney(20,30)" :class="{'active':maxMoney==7}">20-30万</div>
                        <div class="item-money" @click="chooseMoney(30,50)" :class="{'active':maxMoney==7}">30-50万</div>
                        <div class="item-money" @click="chooseMoney(50,0)" :class="{'active':maxMoney==15}">50万以上</div>
                    </div>

                    <van-divider class="search-money-hr"/>


                    <div class="search-money-txt" v-if="minMoney==0 && maxMoney==0">不限</div>
                    <!--<div class="search-money-txt" v-if="minMoney==0 && maxMoney==3">3万以下</div>-->
                    <div class="search-money-txt" v-if="minMoney==50 && maxMoney==0">50万以上</div>
                    <div class="search-money-txt" v-if="minMoney>=0 && maxMoney>0">
                        {{minMoney}}万元-{{maxMoney}}万元
                    </div>

                    <van-slider class="search-money-bar" bar-height="4" v-model="maxMoney" :min="0" :max="50"/>

                    <div class="search-money-bar-txt">
                        <div class="txt-item">不限</div>
                        <div class="txt-item">10万</div>
                        <div class="txt-item">20万</div>
                        <div class="txt-item">30万</div>
                        <div class="txt-item">40万</div>
                        <div class="txt-item">50万</div>
                    </div>

                    <van-button class="search-btn" block type="info" @click="chooseDiyMoney">确 认</van-button>
                </van-dropdown-item>

                <van-dropdown-item class="item" title="筛选" @opened="car_show=2"/>
            </van-dropdown-menu>

            <ul class="search-down-box" v-if="whereStatus">
                <li class="item" v-if="typeVal!=''" @click="typeVal='';getNewData()">{{typeVal}}</li>
                <li class="item" v-if="brand_id>0" @click="brand_id=0;brand_name='';getNewData()">{{brand_name}}</li>
                <li class="item" v-if="series_id>0" @click="series_id=0;series_name='';getNewData()">{{series_name}}</li>
                <li class="item" v-if="minMoney>0 && maxMoney==0" @click="minMoney=0;maxMoney=0;getNewData()">{{minMoney}}万以上</li>
                <li class="item" v-if="minMoney==0 && maxMoney>0" @click="minMoney=0;maxMoney=0;getNewData()">{{maxMoney}}万以下</li>
                <li class="item" v-if="minMoney>0 && maxMoney>0" @click="minMoney=0;maxMoney=0;getNewData()">{{minMoney}}-{{maxMoney}}万元</li>
                <li class="item reset" @click="resetWhere">重置</li>
            </ul>

            <van-row class="page-block">

                <van-list class="list-cell no-border">
                    <template v-for="(item,index) in list">
                        <router-link :to="{name:'buyDetail',query:{id:item.id}}" class="media-list">
                            <van-image class="media-list-logo pull-left" fit="cover" lazy-load :src="img(item.series_thumb?item.series_thumb:item.series.thumb,item.head_img)">
                                <template v-slot:loading>
                                    <van-loading type="spinner" size="20"/>
                                </template>
                            </van-image>

                            <div class="media-list-body pull-left">
                                <div class="media-list-text-top">{{item.car_name?item.car_name:item.series.series_name}}</div>
                                <div class="media-list-text-tps">{{stampToDate(item.card_time,2)}}/{{item.mileage}}公里</div>
                                <div class="media-list-text-bottom">
                                    <span class="pull-left">{{item.price}}万</span>

                                    <div class="pull-right pro-time">{{getCarRefrsh(item.refresh_time)}}</div>
                                </div>
                                <ul class="msg-num">
                                    <li class="item good">{{item.good_numb||0}}</li>
                                    <li class="item star">{{item.collectCount||0}}</li>
                                    <li class="item book">{{item.msgCount||0}}</li>
                                </ul>
                            </div>
                        </router-link>


                        <van-swipe class="ad-buy-box" :autoplay="12000" indicator-color="white" v-if="index==2 && adArr.length>0">
                            <van-swipe-item v-for="(item, index) in adArr" :key="index">
                                <a :href="item.ad_link||'javascript:void(0);'">
                                    <van-image class="img" lazy-load :src="img(item.thumb)">
                                        <template v-slot:loading>
                                            <van-loading type="spinner" size="20"/>
                                        </template>
                                    </van-image>
                                </a>
                            </van-swipe-item>
                        </van-swipe>


                    </template>

                </van-list>


                <infinite-loading :on-infinite="onLoad" ref="inLoading">
                    <div slot="no-results" class="no-more">没有更多了～</div>
                    <div slot="no-more" class="no-more">没有更多了～</div>
                </infinite-loading>
            </van-row>

            <Footer active="buy"></Footer>
        </div>

        <SearchCar @seaData="getBackData" @cancel="seaCancel" v-if="car_show==1" type="1"></SearchCar>

        <SearchMore @seaData="getBackMore" @cancel="seaCancel" v-if="car_show==2" :more="mores"></SearchMore>
    </div>
    </van-pull-refresh>
</template>

<script>
    import Footer from '../../components/footer'
    import Header from '../../components/index_header'
    import SearchCar from '../../components/search_carV2'
    import SearchMore from '../../components/search_more'
    import InfiniteLoading from 'vue-infinite-loading';

    export default {
        name: "buyIndex",
        components: {
            Footer,
            Header,
            SearchCar,
            SearchMore,
            InfiniteLoading
        },
        data() {
            return {
                isLoading: true,
                loadStatus: false,
                //排序
                order: 0,
                orderOption: [
                    {text: '智能排序', value: 0},
                    {text: '最新上架', value: 1},
                    {text: '价格最低', value: 2},
                    {text: '价格最高', value: 3},
                    {text: '车辆最新', value: 4},
                    {text: '历程最少', value: 5}
                ],

                //类型
                typeVal:'',
                typeArr:[
                    {name:'两厢轿车',img:"http://www.xb2sc.cn/static/img/lx.8f26139.png"},
                    {name:'三箱轿车',img:"http://www.xb2sc.cn/static/img/sx.61649e7.png"},
                    {name:'跑车',img:"http://www.xb2sc.cn/static/img/pc.ba89e49.png"},
                    {name:'SUV',img:"http://www.xb2sc.cn/static/img/suv.aabc063.png"},
                    {name:'MPV',img:"http://www.xb2sc.cn/static/img/mpv.cd06cb7.png"},
                    {name:'面包车',img:"http://www.xb2sc.cn/static/img/mbc.cbe8e3e.png"},
                    {name:'皮卡',img:"http://www.xb2sc.cn/static/img/pk.80f1cba.png"}
                ],

                //品牌
                brand_id:this.$route.query.brand_id||0,
                series_id:0,
                brand_name:this.$route.query.brand_name||'',
                series_name:'',


                adArr: [],

                list: [],

                whereStatus:false,

                minMoney:this.$route.query.min||0,
                maxMoney: this.$route.query.max||0,

                keyword: this.$route.query.keyword||'',

                //更多条件
                mores:[],

                car_show: 0,

                page:1,
            }
        },
        computed: {},
        mounted: function () {
            //广告
            this.getAd();

            if(this.minMoney>0|| this.maxMoney>0 || this.brand_id>0){
                this.whereStatus=true;
                this.getNewData();
            }

            var that=this;
            window.addEventListener('scroll', function () {
                var wTop = document.documentElement.scrollTop|| document.body.scrollTop;
                if(wTop>0){
                    that.loadStatus=true;
                }else{
                    that.loadStatus=false;
                }
            })
        },
        methods: {
            onLoad() {
                var param={
                    order:this.order,
                    car_level:this.typeVal,
                    brand_id:this.brand_id,
                    series_id:this.series_id,
                    minMoney:this.minMoney,
                    maxMoney:this.maxMoney,
                    keyword:this.keyword,
                    more:this.mores,
                    page:this.page,
                };

                this.$api.car.getCarList(param).then(res=>{
                    var res=res.data;

                    if(res.data.length>0){
                        this.list.push(...res.data);
                        this.page++;
                        // 加载状态结束
                        this.$refs.inLoading.$emit('$InfiniteLoading:loaded');
                    } else {
                        this.$refs.inLoading.$emit('$InfiniteLoading:complete');
                    }
                });
            },
            reload() {
                var that = this;
                that.$nextTick(function () {
                    that.getNewData();
                    that.isLoading = false;
                })
            },

            getNewData(){
                this.page=1;
                this.list=[];
                this.$nextTick(() => {
                    this.$refs.inLoading.$emit('$InfiniteLoading:reset');
                });
            },

            //广告
            getAd() {
                this.$api.index.getAd({
                    pid: 3
                }).then(res => {
                    res = res.data;
                    this.adArr = res.data;
                });
            },

            seaCancel() {
                window.scrollTo(0, 0);
                this.car_show = 0;
            },

            //回调品牌
            getBackData(data) {
                window.scrollTo(0, 0);

                this.brand_id=data.carBrand.brand_id;
                this.brand_name=data.carBrand.brand;

                this.series_id=data.carSeries.series_id;
                this.series_name=data.carSeries.series_name;

                this.car_show = 0;
                this.whereStatus=true;

                //重置数据
                this.getNewData();
            },

            //更多条件回调
            getBackMore(data) {
                window.scrollTo(0, 0);

                console.log(data);
                this.mores=data;
                this.car_show = 0;

                //重置数据
                this.getNewData();
            },

            //排序
            orderChange() {
                //重置数据
                this.getNewData();
            },

            //选择类型
            chooseType(name){
                this.typeVal=name;
                this.$refs.itemType.toggle();
                this.whereStatus=true;

                //重置数据
                this.getNewData();
            },

            //选择价格
            chooseMoney(min,max){
                this.minMoney=min;
                this.maxMoney=max;
                this.$refs.itemPrice.toggle();
                this.whereStatus=true;

                //重置数据
                this.getNewData();
            },

            //选择自定义价格
            chooseDiyMoney(){
                this.$refs.itemPrice.toggle();
                this.whereStatus=true;

                //重置数据
                this.getNewData();
            },

            //重置条件
            resetWhere(){
                this.minMoney=0;
                this.maxMoney=0;
                this.typeVal="";
                this.mores=[];
                this.brand_id=0;
                this.brand_name="";
                this.series_id=0;
                this.series_name="";
                this.order=0;

                this.whereStatus=false;

                //重置数据
                this.getNewData();
            },
        },
        activated:function () {
            var bid=this.$route.query.brand_id||0;
            var bname=this.$route.query.brand_name||'';

            var mMoney=this.$route.query.min||0;
            var maMoney=this.$route.query.max||0;

            if(bid || bname || mMoney || maMoney){
                this.brand_id=bid;
                this.brand_name=bname;
                this.minMoney=mMoney;
                this.maxMoney=maMoney;
                this.whereStatus=true;
                this.getNewData();
            }

        }

    }
</script>

<style lang="scss" scoped>
    @import "../../assets/scss/index.scss";
</style>
